<template>
  <div class="homemain">
    <div class="header">
      <div class="nav_bar">
        <div class="nav_text">
          <span class="nav_text_title">小区物业管理系统</span>
        </div>
        <div class="nav_menu">
          <!--                管理员-->
          <div v-if="this.type == '1'">
            <el-menu default-active="1" class="el-menu-demo" :collapse="isCollapse" mode="horizontal"
              @select="handleSelect">
              <div v-for="(item, index) in menuList" :key="index">
                <el-menu-item v-if="!item.children" :index="item.id" @click="dealNavLink(item._key, item.id)">
                  <span slot="title" style="color: white">{{
                    item.title
                  }}</span>
                </el-menu-item>

                <el-submenu v-else :index="item.id">
                  <template slot="title">
                    <span class="span1" v-show="!isCollapse" slot="title" style="color: white">{{ item.title }}</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item class="submenu_item" v-for="subItem in item.children" :key="subItem.id"
                      :index="subItem.id" @click="dealNavLink(subItem._key, item.id)">
                      <template>
                        <span slot="title" style="color: black">{{
                          subItem.title
                        }}</span>
                      </template>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </div>
            </el-menu>
          </div>

          <!--                普通用户-->
          <div v-else>
            <el-menu default-active="1" class="el-menu-demo" :collapse="isCollapse" mode="horizontal"
              @select="handleSelect">
              <div v-for="(item, index) in userMenu" :key="index">
                <el-menu-item v-if="!item.children" :index="item.id" @click="dealNavLink(item._key, item.id)">
                  <span slot="title" style="color: white">{{
                    item.title
                  }}</span>
                </el-menu-item>

                <el-submenu v-else :index="item.id">
                  <template slot="title">
                    <span class="span1" v-show="!isCollapse" slot="title" style="color: white">{{ item.title }}</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item class="submenu_item" v-for="subItem in item.children" :key="subItem.id"
                      :index="subItem.id" @click="dealNavLink(subItem._key, item.id)">
                      <template>
                        <span slot="title" style="color: black">{{
                          subItem.title
                        }}</span>
                      </template>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </div>
            </el-menu>
          </div>
        </div>
      </div>
      <div class="nav_right">
        <div style="margin-top: 17px; margin-right: 10px; cursor: pointer">
          <!-- <div class="imgDiv" v-viewer="{movable: true}">
              <img :src="icon"  style="width: 34px;height: 34px;border-radius: 50%">
          </div> -->
          <!--                图片预览插件-->
          <!-- <viewer :images="icon">
              <img :src="icon" style="width: 34px;height: 34px;border-radius: 50%">
          </viewer> -->
        </div>
        <div class="inline-block" style="align-items: center">
          <span>{{ username }}，你好！</span>
        </div>
        <div class="back">
          <i class="fa fa-sign-out line-height-56" @click="logout" style="
              font-size: 25px;
              font-weight: 600;
              position: relative;
              top: 3px;
              cursor: pointer;
            "></i>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" size="tiny" width="35%" append-to-body>
        <div class="logout-center">
          <i class="el-icon-warning-outline" style="color: #f8bb86; font-size: 100px"></i>
          <div class="logout-title">提示</div>
          <div class="logout-text">即将退出系统, 是否继续?</div>
        </div>
        <div slot="footer" class="dialog-footer logout-center">
          <el-button @click="dialogVisible = false"
            style="width: 16%; height: 40px; font-size: 16px; font-weight: bold">取 消
          </el-button>
          <el-button type="danger" @click="handleConfirm"
            style="width: 16%; height: 40px; font-size: 16px; font-weight: bold">确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
    <div style="height: 56px"></div>
    <router-view></router-view>
  </div>
</template>

<script>
import menuConfig from '../config/menuConfig'
import userMenu from '../config/userMenu'

export default {
  // name: "vHead",
  data() {
    return {
      username: sessionStorage.username,
      // photo: [],
      type: '',
      icon: '',
      // username:{},
      menuList: menuConfig,
      userMenu: userMenu,
      isCollapse: false,
      dialogVisible: false
    }
  },
  created() {
    /**
     * this.icon头像路径
     * this.username用户名
     */
     this.fetchData()
  },
  computed: {
    // 定义变量，利用computed获取变量的值(Vuex)
    // user:function () {
    //     return this.$store.getters.getUser.name
    // }
  },
  mounted() {
    // this.getParams()
  },
  methods: {
    async fetchData() {
      const { data: res } = await this.axios.get("http://community.byesame.com/users/getUserByToken", {
        params: {
          token: sessionStorage.token
        }
      });
      console.log(res);
      if (res.type == 1) {
        this.icon = 'http://community.byesame.com/file/' + res.head
      } else if (res.type == 2) {
        this.icon = 'http://community.byesame.com/file/' + res.head
      }
      this.type = res.type
    },
    // getParams(){
    //   this.username = this.$route.query
    // },
    //退出显示弹框
    logout() {
      this.dialogVisible = true
    },
    handleConfirm() {
      this.$router.push('/logout')
      this.dialogVisible = false
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    // 保存链接的激活状态
    // 在页面被创建时，立即从sessionStorage中取出来，并且传递给activepath（参数地址）
    dealNavLink(activepath) {
      // 将获取点击的地址保存在sessionstrong中
      this.$router.push(activepath)
      // this.$router.resolve(activepath);
      // window.open(route.href, '_blank');
    }
  }
}
</script>

<style scoped>
.homemain {
  height: 100%;
}

.header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  background: #389af9;
  z-index: 999;
}

.nav_bar {
  display: flex;
  width: 80%;
}

.nav_text_title {
  margin-left: 25px;
  line-height: 56px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
}

.nav_right {
  display: flex;
  align-items: center;
  color: rgb(255, 255, 255);
  margin-right: 25px;
  font-size: 16px;
  line-height: 50px;
}

.logout-center {
  text-align: center;
}

.logout-title {
  color: rgba(0, 0, 0, 0.65);
  font-weight: 600;
  text-transform: none;
  position: relative;
  display: block;
  padding: 13px 16px;
  font-size: 27px;
  line-height: normal;
  text-align: center;
  margin-bottom: 0;
}

.logout-text {
  font-size: 16px;
  position: relative;
  float: none;
  line-height: normal;
  vertical-align: top;
  text-align: left;
  display: inline-block;
  margin: 0;
  padding: 0 10px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.64);
  max-width: calc(100% - 20px);
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.dialog-footer {
  background-color: rgb(245, 248, 250);
  text-align: center;
  border-radius: 3px;
  margin-top: 13px;
  padding: 13px 16px;
}

.nav_menu {
  position: absolute;
  margin-left: 15%;
}

.el-menu-demo {
  margin-top: 2px;
  margin-left: 6%;
  height: 50px;
  display: flex;
  align-items: center;
  text-align: center;
  background-color: transparent;
  border: 0 !important;
}

::v-deep .el-submenu {
  padding-left: 22px;
}

::v-deep .el-submenu__title {
  width: 100%;
}

::v-deep .el-menu-item.is-active:hover {
  background-color: rgb(50, 65, 87);
}

::v-deep .el-submenu__title:hover {
  background-color: rgb(50, 65, 87);
}

::v-deep .el-menu-item-group__title {
  width: 600px;
  margin-top: 0px;
  position: fixed;
  /*width: 100%;*/
  z-index: 1100;
}

::v-deep .el-menu-item.submenu_item {
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
}

::v-deep .el-submenu__icon-arrow {
  display: none;
}

::v-deep .el-menu-item.submenu_item {
  width: 100px;
}
</style>
